<template>
  <div
    class="bg-[url('assets/imgs/bg.jpg')] text-white bg-cover bg-center p-3 overflow-hidden h-screen"
  >
    <!-- 标题 -->
    <TopHeader />
    <div class="flex container-inner" style="height: calc(100vh-72px)">
      <!-- 左 -->
      <div class="w-1/2 mr-5 bg-opacity-50 bg-slate-800 flex flex-col">
        <!-- 横向柱状图 展示各区域门店 -->
        <HorzontaBAr
          class="w-full flex-1 box-border pb-4"
          style="height: 180px"
        />
        <!-- 门店分布区域占比 -->
        <RedarBar class="flex-1 box-border pb-4" />
        <!-- 门店信息展示 -->
        <!-- <div v-if="data !== null" class="h-1/3"> -->
        <StoreInfo class="flex-1 box-border overflow-hidden" />
        <!-- </div> -->
        <!-- <dv-loading v-else></dv-loading> -->
      </div>
      <!-- 中 -->
      <div class="w-1/2 mr-5 bg-opacity-50 bg-slate-800 flex flex-col">
        <!-- 当前入库待上架 -->
        <TotalData class="flex-1 box-border pb-4" />
        <!-- 采购上架进行中 -->
        <WorldCloud class="flex-1 box-border pb-4" style="height: 180px" />
        <!-- 地图展示 -->
        <MapChart class="flex-1 box-border overflow-hidden" />
      </div>
    </div>
  </div>
</template>

<script setup>
import HorzontaBAr from "./components/HorzontaBAr.vue";
import RedarBar from "./components/RedarBar.vue";
import StoreInfo from "./components/StoreInfo.vue";
import TotalData from "./components/TotalData.vue";
import WorldCloud from "./components/WorldCloud.vue";
import MapChart from "./components/MapChart.vue";
import VerticalBar from "./components/VerticalBar.vue";
import RadiueBar from "./components/RadiueBar.vue";
import TopHeader from "./components/TopHeader.vue";
import { getVisualzation } from "./api/visualization.js";
import "@jiaminghi/data-view";
import { ref, onMounted } from "vue";
import Setting from "@/components/setting.vue";
import "./assets/css/main.css";

// const data = ref(null);
// const loadData = async () => {
//   data.value = await getVisualzation();
//   console.log(data.value);
// };

// loadData();

// setInterval(() => {
//   loadData();
// }, 3000);

// 监听进入全屏的时候的样式
</script>
<styles lang="scss" scoped></styles>
